JavaScript'te WebHID API'sini kullanarak İnsan Arayüz Cihazlarını (HID'ler) keşfetme ve etkileşim kurma konusunda kapsamlı bir kılavuz. Cihaz numaralandırması, filtreleme ve bağlantı en iyi uygulamaları hakkında bilgi edinin.
Frontend WebHID Cihaz Numaralandırması: JavaScript ile Bağlı Cihaz Keşfi
WebHID API'si, web uygulamalarının genellikle yalnızca yerel uygulamaların erişebildiği çok çeşitli İnsan Arayüz Cihazlarıyla (HID'ler) doğrudan iletişim kurma potansiyelinin kilidini açar. Bu, oyun denetleyicileri, özel giriş cihazları, bilimsel cihazlar ve daha fazlası gibi özel donanımlarla etkileşim kuran yenilikçi web deneyimleri oluşturmak için heyecan verici olanaklar sunar. Bu kapsamlı kılavuz, istenen bir HID cihazıyla bağlantı kurmanın çok önemli ilk adımı olan cihaz numaralandırması temel kavramına dalmaktadır.
WebHID API'si Nedir?
WebHID API'si, web uygulamalarının İnsan Arayüz Cihazlarına erişmesine olanak tanır. Bu cihazlar, aşağıdakileri içeren geniş bir kategoriyi kapsar:
- Oyun Kontrolcüleri: Joystick'ler, gamepad'ler, yarış direksiyonları
- Giriş Cihazları: Klavyeler, fareler, iztopları
- Endüstriyel Kontroller: Özel kontrol panelleri, sensör arayüzleri
- Bilimsel Cihazlar: Veri toplama cihazları, ölçüm araçları
- Özel Donanım: Belirli amaçlar için oluşturulmuş ısmarlama giriş cihazları
Sınırlı HID desteği sunan eski tarayıcı API'lerinin aksine, WebHID API'si HID cihazlarına doğrudan erişim sağlayarak geliştiricilerin daha zengin ve daha etkileşimli web uygulamaları oluşturmasına olanak tanır. Uzak bir laboratuvarda bir robotik kolu kontrol ettiğinizi, özel bir giriş cihazıyla bir 3D modeli manipüle ettiğinizi veya doğrudan web tabanlı bir panoda sensör verileri aldığınızı hayal edin - hepsi tarayıcı içinde.
HID Cihaz Numaralandırmasını Anlama
Bir HID cihazıyla etkileşim kurmadan önce, web uygulamanızın kullanıcının sistemine hangi cihazların bağlı olduğunu keşfetmesi gerekir. Bu işleme cihaz numaralandırması denir. WebHID API'si, satıcı kimliği (VID) ve ürün kimliği (PID) veya daha geniş bir filtre kullanarak belirli HID cihazlarına erişim istemek için bir mekanizma sağlar.
İşlem genellikle şu adımları içerir:
- Cihaz Erişimi İstemek: Web uygulaması,
navigator.hid.requestDevice()kullanarak kullanıcıdan bir HID cihazı seçmesini ister. - Cihazları Filtreleme: Kullanıcıya sunulan cihazların listesini daraltmak için filtreler belirleyebilirsiniz. Bu filtreler, cihazın VID ve PID'sine dayanır.
- Cihaz Seçimini İşleme: Kullanıcı listeden bir cihaz seçer.
- Cihazı Açma: Uygulama, seçilen cihaza bir bağlantı açar.
- Veri Aktarımı: Bağlantı kurulduktan sonra, uygulama cihazdan veri gönderip alabilir.
Cihaz Numaralandırmasına Adım Adım Kılavuz
1. Filtrelerle Cihaz Erişimi İstemek
navigator.hid.requestDevice() yöntemi, HID cihazlarına erişim istemek için giriş noktasıdır. Bulmak istediğiniz cihazların VID ve PID'sini belirten nesnelerden oluşan bir dizi olan isteğe bağlı bir `filters` argümanı alır.
Belirli bir VID ve PID'ye sahip bir cihaza nasıl erişim isteneceğine dair bir örnek:
async function requestHIDDevice() {
try {
const devices = await navigator.hid.requestDevice({
filters: [
{
vendorId: 0x1234, // Cihazınızın Satıcı Kimliği ile değiştirin
productId: 0x5678 // Cihazınızın Ürün Kimliği ile değiştirin
},
// Gerekirse diğer cihazlar için daha fazla filtre ekleyin
]
});
if (devices.length > 0) {
const device = devices[0]; // İlk seçilen cihazı kullanın
console.log("HID Cihazı Bulundu:", device);
// Cihazı açın ve iletişime başlayın
await openHIDDevice(device);
} else {
console.log("HID cihazı seçilmedi.");
}
} catch (error) {
console.error("HID cihazı istenirken hata:", error);
}
}
// Örnek kullanım (örneğin, bir düğme tıklamasıyla tetiklenir):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);
Önemli Hususlar:
- Satıcı Kimliği (VID) ve Ürün Kimliği (PID): Bunlar, USB ve Bluetooth cihazlarına atanan benzersiz tanımlayıcılardır. Hedef cihazınızın VID ve PID'sini üreticinin belgelerinden veya sistem araçlarını (örneğin, Windows'ta Aygıt Yöneticisi, macOS'ta Sistem Bilgileri veya Linux'ta `lsusb`) kullanarak edinmeniz gerekir.
- Kullanıcı Onayı:
requestDevice()yöntemi, kullanıcının hangi HID cihazlarına erişim izni vereceğini seçmesine olanak tanıyan tarayıcı kontrollü bir izin istemi görüntüler. Bu, kötü amaçlı web sitelerinin kullanıcı onayı olmadan hassas donanımlara erişmesini önlemek için çok önemli bir güvenlik önlemidir. - Çoklu Filtreler: Farklı VID ve PID'lere sahip cihazlara erişim istemek için `filters` dizisine birden çok filtre ekleyebilirsiniz. Bu, uygulamanızın birden çok donanım yapılandırmasını desteklemesi durumunda kullanışlıdır.
2. Cihaz Bilgilerini Edinme
Kullanıcı bir cihaz seçtikten sonra, requestDevice() yöntemi bir HIDDevice nesneleri dizisi döndürür. Her HIDDevice nesnesi, cihazın VID, PID, usagePage, kullanım ve koleksiyonları gibi cihazla ilgili bilgiler içerir. Cihazı daha fazla tanımlamak ve yapılandırmak için bu bilgileri kullanabilirsiniz.
async function openHIDDevice(device) {
try {
await device.open();
console.log("HID Cihazı Açıldı:", device.productName);
// Giriş raporlarını dinleyin
device.addEventListener("inputreport", event => {
const { data, reportId } = event;
const uint8Array = new Uint8Array(data.buffer);
console.log(`Alınan giriş raporu ${reportId}:`, uint8Array);
// Giriş raporu verilerini işleyin
});
device.addEventListener("disconnect", event => {
console.log("HID Cihazı Bağlantısı Kesildi:", device.productName);
// Cihaz bağlantısının kesilmesini işleyin
});
} catch (error) {
console.error("HID cihazı açılırken hata:", error);
}
}
Cihaz Özellikleri:
vendorId: Cihazın satıcı kimliği.productId: Cihazın ürün kimliği.productName: Ürünün insan tarafından okunabilir adı.collections: Cihazın HID koleksiyonlarını (raporlar, özellikler, vb.) açıklayan HIDCollectionInfo nesnelerinin bir dizisi. Bu çok karmaşık olabilir ve yalnızca karmaşık cihazlar için gereklidir.
3. Cihaz Bağlantısını ve Bağlantısının Kesilmesini İşleme
WebHID API'si, bir cihaz bağlandığında veya bağlantısı kesildiğinde uygulamanızı bilgilendirmek için olaylar sağlar. navigator.hid nesnesindeki connect ve disconnect olaylarını dinleyebilirsiniz.
navigator.hid.addEventListener("connect", event => {
const device = event.device;
console.log("HID Cihazı Bağlandı:", device);
// Cihaz bağlantısını işleyin (örneğin, cihazı yeniden açın)
});
navigator.hid.addEventListener("disconnect", event => {
const device = event.device;
console.log("HID Cihazı Bağlantısı Kesildi:", device);
// Cihaz bağlantısının kesilmesini işleyin (örneğin, kaynakları temizleyin)
});
Bağlantı Yönetimi için En İyi Uygulamalar:
- Bağlantıda Yeniden Numaralandırma: Bir cihaz bağlandığında, uygulamanızın güncel bir listeye sahip olduğundan emin olmak için cihazları yeniden numaralandırmak genellikle iyi bir uygulamadır.
- Bağlantı Kesildiğinde Kaynak Temizleme: Bir cihazın bağlantısı kesildiğinde, onunla ilişkili tüm kaynakları serbest bırakın (örneğin, cihaz bağlantısını kapatın, olay dinleyicilerini kaldırın).
- Hata İşleme: Bir cihazın bağlanamadığı veya beklenmedik şekilde bağlantısının kesildiği durumları sorunsuz bir şekilde ele almak için sağlam hata işleme uygulayın.
Gelişmiş Cihaz Filtreleme Teknikleri
Temel VID ve PID filtrelemenin ötesinde, WebHID API'si belirli cihazları hedeflemek için daha gelişmiş teknikler sunar. Bu, özellikle birden çok arabirime veya işlevselliğe sahip cihazlarla uğraşırken kullanışlıdır.
1. Kullanım Sayfasına ve Kullanıma Göre Filtreleme
HID cihazları, bir cihazın sağladığı işlev türünü tanımlayan *kullanım sayfaları* ve *kullanımlar* halinde düzenlenir. Örneğin, bir klavye "Genel Masaüstü" kullanım sayfasına aittir ve "Klavye" kullanımına sahiptir. Belirli cihaz türlerini hedeflemek için cihazları kullanım sayfalarına ve kullanımlarına göre filtreleyebilirsiniz.
async function requestSpecificKeyboard() {
try {
const devices = await navigator.hid.requestDevice({
filters: [
{
usagePage: 0x01, // Genel Masaüstü Sayfası
usage: 0x06 // Klavye Kullanımı
}
]
});
// ... (cihazı işlemek için kodun geri kalanı)
} catch (error) {
console.error("HID cihazı istenirken hata:", error);
}
}
Kullanım Sayfası ve Kullanım Değerlerini Bulma:
- HID Kullanım Tabloları: Resmi HID kullanım tabloları (USB Uygulayıcıları Forumu tarafından yayınlanır), çeşitli cihaz türleri için standartlaştırılmış kullanım sayfalarını ve kullanımlarını tanımlar.
- Cihaz Belgeleri: Cihaz üreticisinin belgeleri, cihazları için kullanım sayfası ve kullanım değerlerini belirtebilir.
- HID Rapor Tanımlayıcıları: Gelişmiş senaryolar için, bir cihazın desteklenen kullanım sayfalarını ve kullanımlarını belirlemek için cihazın HID rapor tanımlayıcısını analiz edebilirsiniz.
2. Birden Çok Arayüzü İşleme
Bazı HID cihazları, her biri kendi işlevselliğine sahip birden çok arayüz sunar. WebHID API'si, her arayüzü ayrı bir HID cihazı olarak ele alır. Belirli bir arayüze erişmek için, istenen arayüzü hedeflemek üzere VID/PID filtrelemesini kullanım sayfası/kullanım filtrelemesiyle birleştirmeniz gerekebilir.
Pratik Örnekler ve Kullanım Durumları
1. Özel Bir Oyun Kontrolcüsü Arayüzü Oluşturma
Web tabanlı bir oyun oluşturduğunuzu ve özel bir oyun kontrolcüsünü desteklemek istediğinizi hayal edin. Kontrolcünün düğmelerinden, joystick'lerinden ve diğer kontrollerinden doğrudan giriş okumak için WebHID API'sini kullanabilirsiniz. Bu, son derece duyarlı ve sürükleyici bir oyun deneyimi oluşturmanıza olanak tanır.
2. Web Tabanlı Bir MIDI Kontrolcüsü Oluşturma
Müzisyenler ve ses mühendisleri, dijital ses iş istasyonlarıyla (DAW'ler) veya sentezleyicilerle etkileşim kuran web tabanlı MIDI kontrolcülerinden yararlanabilir. WebHID API'si, doğrudan tarayıcıda MIDI mesajları gönderip alan özel MIDI kontrolcüleri oluşturmanıza olanak tanır.
3. Bilimsel Cihazlarla Etkileşim Kurma
Araştırmacılar ve bilim insanları, veri toplama cihazları, sensörler ve ölçüm araçları gibi bilimsel cihazlarla arabirim oluşturmak için WebHID API'sini kullanabilir. Bu, verileri doğrudan web tabanlı bir panoda veya analiz aracında toplamalarına ve analiz etmelerine olanak tanır.
4. Erişilebilirlik Uygulamaları
WebHID, yardımcı teknolojiler oluşturmak için fırsatlar sunar. Örneğin, motor bozukluğu olan kullanıcılar için özel giriş cihazları doğrudan web uygulamalarına entegre edilebilir ve daha özelleştirilmiş ve erişilebilir deneyimler sağlanabilir. Küresel örnekler, eller serbest gezinme için özel göz izleme cihazlarının veya farklı diller ve giriş yöntemleri için tek anahtarlı erişim için özelleştirilebilir düğme dizilerinin entegrasyonunu içerebilir.
Tarayıcılar Arası Uyumluluk ve Güvenlik Hususları
1. Tarayıcı Desteği
WebHID API'si şu anda Chromium tabanlı tarayıcılarda (Chrome, Edge, Opera) desteklenmektedir ve diğer tarayıcılar için geliştirilmektedir. WebHID API'sini uygulamanızda uygulamadan önce, tarayıcı uyumluluğunu kontrol etmek ve API'yi desteklemeyen tarayıcılar için yedek mekanizmalar sağlamak önemlidir.
2. Güvenlik Hususları
WebHID API'si güvenlik göz önünde bulundurularak tasarlanmıştır. Tarayıcı, bir web uygulamasının bir HID cihazına erişmesine izin vermeden önce kullanıcıdan izin ister. Bu, kötü amaçlı web sitelerinin kullanıcı onayı olmadan hassas donanımlara erişmesini önler. Ayrıca, WebHID API'si tarayıcının güvenlik korumalı alanında çalışır ve uygulamanın sistem kaynaklarına erişimini sınırlar.
- Yalnızca HTTPS: WebHID, diğer güçlü web API'leri gibi, çalışmak için güvenli bir bağlam (HTTPS) gerektirir.
- Kullanıcı Hareketleri: Cihaz erişimi istemek, istenmeyen erişim isteklerini önlemek için genellikle bir kullanıcı hareketi (örneğin, bir düğme tıklaması) gerektirir.
- İzinler API'si: İzinler API'si, WebHID izinlerini sorgulamak ve yönetmek için kullanılabilir.
Sık Karşılaşılan Sorunları Giderme
1. Cihaz Bulunamadı
Uygulamanız HID cihazını bulamıyorsa, VID ve PID'yi iki kez kontrol edin. Cihazın gerçek tanımlayıcılarıyla eşleştiğinden emin olun. Ayrıca, cihazın düzgün şekilde bağlandığını ve işletim sistemi tarafından tanındığını doğrulayın.
2. İzin Reddedildi
Kullanıcı HID cihazına erişim iznini reddederse, uygulamanız onunla iletişim kuramaz. Bu senaryoyu, kullanıcıya bir mesaj görüntüleyerek ve erişimin neden gerekli olduğunu açıklayarak sorunsuz bir şekilde ele alın. Kullanıcının uygulamanızla etkileşim kurması için alternatif yollar sağlamayı düşünün.
3. Veri Biçimi Sorunları
HID cihazları genellikle veri göndermek ve almak için özel veri biçimleri kullanır. Cihazın veri biçimini anlamanız ve uygulamanızda uygun ayrıştırma ve serileştirme mantığını uygulamanız gerekir. Veri biçimi hakkında bilgi için cihaz üreticisinin belgelerine bakın.
Sonuç
WebHID API'si, web geliştiricilerinin İnsan Arayüz Cihazlarıyla doğrudan iletişim kuran yenilikçi ve etkileşimli web uygulamaları oluşturmasını sağlar. Cihaz numaralandırması, filtreleme ve bağlantı yönetimi ilkelerini anlayarak, WebHID API'sinin tüm potansiyelinin kilidini açabilir ve ilgi çekici kullanıcı deneyimleri oluşturabilirsiniz. Web'i fiziksel dünyaya bağlamak, yaratıcılık, üretkenlik ve erişilebilirlik için yeni olasılıkları teşvik etmek için WebHID'nin gücünü kucaklayın.